<template>
    <div class="c-main">
        <div class="c-inner">
            <br>
            <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <Form-item label="主题" prop="topic">
                    <i-input v-model="formValidate.topic" type="text" placeholder="课程主题是啥..." style="width:600px"></i-input>
                </Form-item>
                <Form-item label="分类" prop="category">
                    <i-select v-model="formValidate.category" size="large" placeholder="请选择课程分类" style="width:300px">
                        <i-option v-for="(item, index) in categoryList" :value="item.id" :key="index">{{ item.categoryName }}</i-option>
                    </i-select>
                </Form-item>
                <Form-item label="介绍" prop="description">
                    <i-input v-model="formValidate.description" type="textarea" :autosize="{minRows: 5,maxRows: 20}" style="width:600px" placeholder="简单描述一下这个课程呗..."></i-input>
                </Form-item>
                <Form-item label="上传海报" prop="poster">
                    <Upload v-bind:action="url" :on-success="handleSuccess" :format="['bmp','gif','jpeg','jpg','png']" :max-size="2048" :multiple="false" :on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize">
                        <Button type="ghost" icon="ios-cloud-upload-outline">上传课程海报图片，支持jpg、png格式，请耐心等待上传进度条消失后提交数据，谢谢</Button>
                    </Upload>
                </Form-item>
                <Form-item>
                    <i-button type="primary" @click="handleSubmit('formValidate')">提交</i-button>
                    <i-button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</i-button>
                </Form-item>
            </i-form>
        </div>
    </div>
</template>
<script>
import CategoryAPI from '@/api/knowledge/CategoryAPI';
import CourseAPI from '@/api/knowledge/CourseAPI';
export default {
    data() {
        return {
            uploadedPosterId: '',
            categoryList: [],
            formValidate: {
                topic: '',
                category: '',
                description: ''
            },
            ruleValidate: {
                topic: [
                    { required: true, message: '标题不能为空', trigger: 'blur' }
                ],
                //category: [
                // { required: true, message: '请选择分类', trigger: 'change' }
                //],
                description: [
                    { required: true, message: '请输入课程介绍', trigger: 'blur' },
                    { type: 'string', min: 10, message: '介绍不能少于10字', trigger: 'blur' }
                ]
            }
        }
    },
    mounted() {
        this.fetchParentCategory();
    },
    computed: {
        "url": function() {
            if (process.env.NODE_ENV === 'development') {
                return '/api/knowledge/file/upload/poster';
            }
            return '/knowledge/file/upload/poster';
        }
    },
    methods: {
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    if (this.uploadedPosterId == '') {
                        this.$Message.success('您还没上传海报');
                        return;
                    }
                    if (this.formValidate.category == '') {
                        this.$Message.warning('请选择课程分类');
                        return;
                    }
                    if (this.formValidate.topic.length >=64) {
                      this.$Message.warning('课程标题不能超过64字');
                      return;
                    }
                    if (this.formValidate.description.length >=256) {
                      this.$Message.warning('课程介绍不能超过256字');
                      return;
                    }

                    this.createCourse();
                } else {
                    this.$Message.error('验证失败!');
                }
            })
        },
        handleFormatError(file) {
            this.$Notice.warning({
                title: '文件格式不正确',
                desc: '文件 【' + file.name + '】 格式不正确，请上传jpg或bmp或gif或png或gpeg格式的文件。'
            });
        },
        handleMaxSize(file) {
            this.$Notice.warning({
                title: '超出文件大小限制',
                desc: '文件 【' + file.name + '】 太大，不能超过 2M。'
            });
        },
        fetchParentCategory() {
            let _this = this;
            CategoryAPI.fetchParentCategory(function(resp) {
                _this.categoryList = resp;
            }, function(error) {
                _this.$Message.error("操作失败【" + error + "】");
            });
        },
        createCourse() {
            let _this = this;
            let params = [_this.formValidate.category, _this.formValidate.topic, _this.formValidate.description, _this.uploadedPosterId];
            CourseAPI.createCourse(params, function(resp) {
                if (resp.code != '0000') {
                    _this.$Message.error(resp.message);
                } else {
                    _this.$Message.success('提交成功!');
                    _this.$router.push({ path: "/knowledge/course/my/list" });
                }
            }, function(error) {
                _this.$Message.error("操作失败【" + error + "】");
            });
        },
        handleSuccess(resp, file) {
            this.uploadedPosterId = resp.string;
        },
        handleReset(name) {
            this.$refs[name].resetFields();
        }
    }
}
</script>
<style scoped>
.c-main {
  width: 70vw;
  height: auto;
  margin: 0 auto;
}

.c-inner {
  margin: 0 auto;
  padding-top: 10%;
  padding-left: 20%;
}
</style>
